<template>
    <div class="Adddepartment">
        <div class="dep-cont">
            <div class="dep-header">
            <a @click="showploy"  v-bind:class="{active:!isactive}">添加员工</a>
            <a @click="showaddemp" v-bind:class="{active:isactive}">
              员工列表
            </a>
            </div>
        </div>
        <home-employ v-show="showemploybox"></home-employ>
        <home-addemp v-show="showaddempbox"></home-addemp>
        
    </div>
    
</template>

<script>
import HomeEmploy from './Employeetalone'
import HomeAddemp from './Addemp'
export default {
     name:'Employeetal',
     data(){
      return{
        showemploybox:true,
        isactive:true,
        showaddempbox:false
      }
     },
     components: {
      HomeEmploy,
      HomeAddemp
        },
      methods:{
        showploy(){
          this.showaddempbox=true;
          this.showemploybox=false;
          this.isactive=false;
        },
        showaddemp(){
          this.showaddempbox=false;
          this.showemploybox=true;
          this.isactive=true;
        }

      }  


}
</script>
<style >
.active{
    color: #000;
}
.Adddepartment{
    margin-left: 4rem;
    background-color: #f3f3f3;
    position: relative;
    padding-top: 30px;
}
.dep-cont{
     margin: 0 auto;
   
    width: 80%;
    background-color: #fff;
}
.dep-header{
    height: .8rem;
    font-size: 18px;
    color: #1cb394;
    line-height: .8rem;
    border-bottom: 1px solid #666;
    margin-left: 20px;
}
</style>